import { getCinemaList } from "../../api/cinema";

Page({
  allList: [], // 接口返回的全部影院数据

  data: {
    list: [], // 列表数据
    districtList: [
      // { id: -1, name: "全城" },
      // { id: 1, name: "福田区" },
    ], // 区列表
    districtId: -1, // 当前选中的区Id，默认使用 全城的 -1
    districtName: "全城", // 当前选中的区名字，默认使用 全城的
    scrollTop: 500,

    ticketFlag: 1,
    options: [
      { text: "APP订票", value: 1 },
      { text: "前台兑换", value: 2 },
    ],
  },

  // 刷新数据的方法
  refresh() {
    getCinemaList(this.data.ticketFlag).then((resp) => {
      // 修改 allList
      this.allList = resp.cinemas;

      // 计算出区名字数据
      let districtNameList = this.allList.map((item) => item.districtName);
      // 去重
      districtNameList = Array.from(new Set(districtNameList));
      // 处理成对象格式
      const districtList = districtNameList.map((item) => ({
        id: this.allList.find((aaaa) => aaaa.districtName === item).districtId,
        name: item,
      }));
      // 头部追加一个全城，
      districtList.unshift({ id: -1, name: "全城" });
      this.setData({
        districtList,
        list: this.getDisplayList(-1),
      });
    });
  },

  /**
   * 获取用于页面展示的数据
   * @param {*} id 区的Id
   */
  getDisplayList(id) {
    if (id === -1) {
      // 全城
      return this.allList;
    } else {
      return this.allList.filter((item) => item.districtId === id);
    }
  },

  // 区点击
  onDistrictTap(event) {
    // 1. 获取数据
    const { id, name } = event.currentTarget.dataset;
    // 2. 修改 districtId
    this.setData({
      list: this.getDisplayList(id),
      districtId: id,
      districtName: name,
    });
    // 3. 选择 组件，且调用它的 toggle 方法，让其关闭
    this.selectComponent("#district").toggle();
  },

  // 订票方式点击
  onChange(event) {
    const value = event.detail;
    // 修改 this.data.ticketFlag
    this.setData({ ticketFlag: value });
    // 调用接口
    this.refresh();
  },

  bindscrolltoupper() {
    console.log("bindscrolltoupper");
  },

  onLoad() {
    this.refresh();
  },
});
